<template>
  <div class="container">
    <img src="http://file.rzkeji.com/web/loveciy/img/customer/title.jpg" class="title"/>
    <div class="yuan">
      <img src="http://file.rzkeji.com/web/loveciy/img/customer/yuan1.png" class="yuan1"/>
      <img src="http://file.rzkeji.com/web/loveciy/img/customer/yuan3.png" class="yuan2"/>
      <img src="http://file.rzkeji.com/web/loveciy/img/customer/yuan2.png" class="yuan3"/>
      <img src="http://file.rzkeji.com/web/loveciy/img/customer/yuan4.jpg" class="yuan4"/>
    </div>
    <div class="introduce">
      <span>乐自造1号舱</span>
      <span>YOUR ONE-ON-ONE SERVICE</span>
      <div class="contact">
        <img src="http://file.rzkeji.com/web/loveciy/img/customer/wechat.png" class="wechat" @click="wechat"/>
        <img src="http://file.rzkeji.com/web/loveciy/img/customer/tel.png" class="tel" @click="tel"/>
      </div>
    </div>
    <img src="http://file.rzkeji.com/web/loveciy/img/customer/time.jpg" class="time"/>
    <img src="http://file.rzkeji.com/web/loveciy/img/customer/design.jpg" class="design"/>
    <div class="designDetails">
      <div class="password">淘口令</div>
      <div class="official">官方淘宝店</div>
      <div class="me">乐自造定制</div>
      <div class="public">微信公众号</div>
      <div class="classClothes">乐自造班服定制</div>
      <div class="plan">脑洞计划</div>
    </div>
    <img src="http://file.rzkeji.com/web/loveciy/img/customer/design.jpg" class="go"/>
    <img src="http://file.rzkeji.com/web/loveciy/img/customer/design.jpg" class="go"/>
    <img src="http://file.rzkeji.com/web/loveciy/img/footer.jpg" class="footer"/>
  </div>
</template>

<script>


export default {
  components: {

  },

  data () {
    return {
      
    }
  },

  created () {
  
  },
  methods:{
    tel(){
      wx.makePhoneCall({
      phoneNumber: '1340000' //仅为示例，并非真实的电话号码
      })
    },
    wechat(){
      
    }
  }
}
</script>

<style>
.container{width: 100%;}
.title{width: 100%;height: 75.5px;}
.yuan{width: 100%;position: relative;height: 300px;border: 1px solid black;background: black}
.yuan img{position: absolute;left: 50%;top:50%;}
.yuan1{width: 200px;height: 200px;margin-top: -100px;margin-left: -100px;}
.yuan2{width: 120px;height: 120px;margin-top: -60px;margin-left: -60px;}
.yuan3{width: 50px;height: 50px;margin-top: -25px;margin-left: -25px;}
.yuan img.yuan4{width: 100px;height: 100px;left: 0;top: 0}

.introduce{width: 100%;}
.introduce span:nth-of-type(1){width: 150px;height: 50px;line-height: 50px;display: block;font-size: 26px;text-align: center;margin-left: 107px;}
.introduce span:nth-of-type(2){width: 140px;line-height: 20px;display: block;margin-left: 117px;font-size: 16px;background: gray}
.contact{width: 375px;margin-top:10px;}
.wechat{width: 150px;height: 48.6px;margin-left: 30px;}
.tel{width: 150px;height: 48.6px;margin-left: 15px;}
.time{width: 375px;height: 90px;}
.design,.go{width: 375px;height: 166px;}
.go{margin-top: 30px;}
.designDetails{width: 100%;margin-top: 10px;}
.designDetails div{height: 30px;line-height: 30px;text-align: center;margin:0 auto;}
.designDetails div.password{width: 250px;border: 1px solid gray;margin-bottom: 10px;border-radius: 8px;}
.official,.plan,.public{font-size: 20px;}
.me,.classClothes{font-size: 18px;color: #7d7d7d}
.designDetails div.public{margin-top: 30px;}
.designDetails div.official{margin-top:10px;}
.footer{width: 100%;height: 36px;}
</style>
